var gulp=require("gulp");
var server=require("browser-sync").create();
var plugins=require("gulp-load-plugins")();

function changeCss(done){
    gulp.src("./src/css/*.css")
    .pipe(plugins.concat("main.css"))
    .pipe(plugins.minifyCss())
    .pipe(plugins.rename("main.min.css"))
    .pipe(gulp.dest("./dist/css/"))
    .on("end",server.reload);
    done();
}

function changeJS(done){
    gulp.src("./src/js/**/*.*")
    .pipe(gulp.dest("./dist/js/"))
    .on("end",server.reload);
    done();
}

function changeHTML(done){
    gulp.src("./src/**/*.html")
    .pipe(plugins.minifyHtml())
    .pipe(gulp.dest("./dist/"))
    .on("end",server.reload);
    done();
}
function changeImg(done){
    gulp.src("./src/img/*.@(jpg|png|jpeg|gif)")
    .pipe(plugins.imagemin())
    .pipe(gulp.dest("./dist/img"))
    .on("end",server.reload);
    done();
}

function init(done){
    server.init({
        server:"./dist/",
        port:8080
    });
    gulp.watch(["./src/img/*.@(jpg|png|jpeg|gif)"],changeImg);
    gulp.watch(["./src/js/**/*.*"],changeJS);
    gulp.watch(["./src/css/*.css"],changeCss);
    gulp.watch(["./src/**/*.html"],changeHTML);
}


exports.default=gulp.series(changeImg,changeCss,changeJS,changeHTML,init);